<template>
  <div class="home">
    <!-- Header -->


    <!-- Banner -->
    <main>
      <section class="banner">
        <img src="/images/logo.jpg" alt="FreshMart freshness banner">
        <div class="banner-text">
          <h1>Welcome to FreshMart</h1>
          <p>Fresh, healthy, and affordable fruits and vegetables</p>
        </div>
      </section>

      <!-- Featured products -->
      <section class="highlights">
        <h2>Featured Products</h2>

        <div class="product-grid">
          <div class="product-card">
            <img src="/images/Watermelon.jpg" alt="Watermelon">
            <h3>Watermelon</h3>
            <p>€5.99&nbsp;/&nbsp;kg</p>
          </div>

          <div class="product-card">
            <img src="/images/Lettuce.jpg" alt="Lettuce">
            <h3>Lettuce</h3>
            <p>€0.99&nbsp;/&nbsp;piece</p>
          </div>

          <div class="product-card">
            <img src="/images/Beef.jpg" alt="Beef">
            <h3>Beef</h3>
            <p>€10.99&nbsp;/&nbsp;kg</p>
          </div>

          <div class="product-card">
            <img src="/images/Shower gel.jpg" alt="Shower gel">
            <h3>Shower Gel</h3>
            <p>€4.99</p>
          </div>
        </div>
      </section>
    </main>

    <!--
    <footer>
      <p>&copy; 2025 FreshMart | <router-link to="/about">About Us</router-link></p>
    </footer>
    -->
  </div>
</template>

<script>
export default {
  name: 'Home',

}
</script>

<style scoped>

</style>